<template>
  <div id="setPassword">
    <router-view></router-view>
    <div class="pageDiv">
      <div class="headerDiv">
        <div class="title">设置密码</div>
      </div>
      <div class="accountDiv">
        <input
          v-model="pwd1"
          placeholder="请输入密码（8-20位字母/数字）"
          class="account"
          @blur="fixScroll"

        />

        <div class="line"></div>
      </div>
      <div class="vcodeDiv">
        <input v-model="pwd2" placeholder="请重新输入密码" class="pwd" @blur="fixScroll"
        />

        <div class="line"></div>
      </div>
      <van-button
        type="default"
        class="loginbutton"
        size="large"
        color="#397BE6"
        @click="buttonClick"
        >注册</van-button
      >
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { api_register } from "../../service/api/user";
import { Dialog, Toast } from "vant";
import { ispwd, md5Str } from "../../utils/utils";
import store from "@/store/index";

export default {
  name: "SetPassword",
  data() {
    return {
      pwd1: "",
      pwd2: "",
      phone: this.$route.params.phone,
      code: this.$route.params.code
    };
  },
  computed: {},
  methods: {
    ...mapActions(["syncUserInfo"]),
      fixScroll() {

          let u = navigator.userAgent;

          let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

          if (isiOS) {

              window.scrollTo(0, 0);

          }

      },
    async buttonClick() {
      if (!ispwd(this.pwd1)) {
        this.$toast("请输入8-20位(字母/数字)的密码");
        return;
      }
      if (this.pwd1 !== this.pwd2) {
        this.$toast("两次密码输入不一致");
        return;
      }

      let s = {
        mobile: this.phone,
        password: md5Str(this.pwd2),
        code: this.code,
        // nickName: this.phone,
        // openId: "testopenid",
        // avatar: "http://thirdwx.qlogo.cn/mmopen/Q3auHgzwzM4OQtmTTmvAEicknG4POHgt6ZskicuKubH33aZ6xYu7nvCKPeM0ZIG15v3IXe9hDnQMiaslahJHbxaiaA/132"

        nickName: store.state.wxInfo.nickname,
        openId: store.state.wxInfo.openid,
        avatar: store.state.wxInfo.headimgurl
      };
      Toast.loading({
        mask: true,
        message: "",
        duration: 0
      });

      api_register(s)
        .then(res => {
          this.$toast("注册成功");
          // 用户信息保存到本地
          res.data.nickName = s.nickName;
          res.data.avatar = s.avatar;

          this.syncUserInfo(res.data);

          this.$router.push({ name: "home" });

          // this.$router.go(-3);
        })
        .catch(error => {
          console.log("-------------" + error);

          this.$toast(error.message);
        });
    }
  },
  mounted() {
    this.type = this.$route.params.type;
  }
};
</script>

<style scoped>
#setPassword {
  position: relative;
  top: 0;
  left: 0;
  /*right: 0;*/
  /*bottom: 0;*/
  width: 100%;
  height: 100%;
  z-index: 200;
  overflow: auto;
  background-color: white;
}
.pageDiv {
  margin-left: 1.3333333333333333rem;
  margin-right: 1.3333333333333333rem;

  margin-top: 2.566666666666667rem;
}

.headerDiv {
  display: flex;
  position: relative;
  align-items: center;
  height: 2.8rem;
  width: 100%;
}

.title {
  height: 2.8rem;
  font-size: 2.1333333333333333rem;
  font-family: PingFangSC;
  font-weight: 600;
  color: #121c32;
  line-height: 2.7666666666666666rem;
}
.subTitle {
  position: absolute;
  right: 0rem;
  height: 1.5rem;
  font-size: 1.0666666666666667rem;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(57, 123, 230, 1);
  line-height: 1.5rem;
}

.accountDiv {
  position: relative;
  margin-top: 3.7666666666666666rem;
  display: flex;
  height: 3.4rem;
  align-items: center;
}

.account {
  height: 3.4rem;
  width: 20rem;
  line-height: 1.4rem;
}

.delete {
  position: absolute;
  right: 0;
  height: 1rem;
  width: 1rem;
}

.vcodeDiv {
  position: relative;
  margin-top: 0rem;
  display: flex;
  height: 4.4rem;
  align-items: center;
}
.pwd {
  height: 4.4rem;
  width: 15rem;
  line-height: 1.4rem;
}

.forgetpwd {
  position: absolute;
  right: 0;
  height: 4.4rem;
  font-size: 1.0666666666666667rem;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(57, 123, 230, 1);
  line-height: 4.4rem;
}

.forgetpwdDisable {
  position: absolute;
  right: 0;
  height: 4.4rem;
  font-size: 1.0666666666666667rem;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(191, 195, 205, 1);
  line-height: 4.4rem;
}

.loginbutton {
  margin-top: 2rem;
  border-radius: 1.6333333333333333rem;
}
.footDiv {
  display: flex;
  flex-direction: column;
  height: 6.9rem;
  align-items: center;
  margin-top: 3.2333333333333334rem;
}

.footTopLabel {
  height: 1.2rem;
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(122, 132, 145, 1);
  line-height: 1.2rem;
}
.footBttomLabel {
  margin-top: 0.36666666666666664rem;
  height: 1.2rem;
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.2rem;
}

.loginImg {
  margin-top: 1.2666666666666666rem;
  height: 2.933333333333333rem;
  width: 2.933333333333333rem;
}

.line {
  position: absolute;
  left: 0rem;
  right: 0rem;
  height: 0.5px;
  bottom: 0rem;
  background-color: #f0f1f5;
}

input::-webkit-input-placeholder {
  font-size: 1.0666666666666667rem;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(191, 195, 205, 1);
}
</style>
